<!DOCTYPE html>
<html>
<head>
    <title>车辆列表</title>
    <link rel="stylesheet" href="${request.contextPath}/resources/layui/css/layui.css">
</head>
<body>
<div style="margin-left: 10px;margin-top: 10px">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">

            <div class="layui-form-item" >
                <label class="layui-form-label">图书ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="bookId" readonly class="layui-input" autocomplete="off" placeholder="图书ID" lay-verify="required" lay-reqText="图书ID不能为空" >
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">还书时间</label>
                <div class="layui-input-inline" >
                    <input type="text" class="layui-input" id="returnTime" readonly placeholder="还书时间" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn" id="searchBtn">查询</button>
            </div>
        </div>
    </form>
    <hr>
    <table id="dataTable" lay-filter="dataTableFilter"></table>
</div>
<script src="${request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['form', 'table', 'jquery', 'layer','upload','laydate'], function () {
        let cxt = "${request.contextPath}";
        let form = layui.form;
        let table = layui.table;
        let $ = layui.jquery;
        let layer = layui.layer;
        let upload = layui.upload;
        let laydate = layui.laydate;

        //初始化时间范围选择器
        laydate.render({
            elem:"#returnTime",
            range:"~"
        });

        let tabOpt = {
            elem: "#dataTable",
            id: "dataTableId",
            url: cxt + "/bookReturn/page.do",
            toolbar:"#headerBtns",
            cols: [[
                {field: "bookId", title: "图书ID",minWidth:120},
                {field: "returnTime", title: "还书时间"},
                {field: "mean", title: "心得"},
                {field: "rentName", title: "业务员"},
                {field: "createTime", title: "创建时间",minWidth:150},
            ]],
            page: true,
            parseData: function (rs) {
                if (rs.code == 200) {
                    return {
                        code: rs.code,
                        msg: rs.msg,
                        count: rs.data.total,
                        data: rs.data.records
                    }
                }
            },
            response: {
                statusCode: 200
            }
        };
        //渲染数据表格
        let tabIns = table.render(tabOpt);
        //搜索
        $("#searchBtn").click(function (){
            let bookId = $("#bookId").val();
            let returnTime = $("#returnTime").val();

            tabIns.reload({
                where:{
                    bookId:bookId,
                    returnTime:returnTime
                }
            })
        });
    })
</script>
</body>
</html>
